<template>
    <div>
        <button @click="message='你好啊'"> 修改message</button>
        <button @click="info.name='jack'"> 修改info</button>
</div>
</template>
<script>
import { reactive ,ref, watch} from 'vue'
    export default {
        // data(){
        //     return {
        //         message:""
        //     }
        // },
        // watch(){
        //     message(newValue,oldValue){

        //     }
        // },
        setup(){
            const info = reactive({
                name:"inzv",
                age:18
            })
            const message = ref('hello inzv')
            watch(message, (newValue,oldValue)=>{
                console.log(newValue,  oldValue);
            })
            // 2.侦听数据的变化
            // watch(info, (newValue,oldValue)=>{
            //     console.log(newValue,  oldValue);
            //     console.log(newValue === oldValue);
            // },{
            //     immediate: true
            // })
             
            // 3. 监听reactive数据变化后获取普通对象
            watch(()=>({...info}),(newValue,oldValue)=>{
                console.log(newValue,oldValue);
            },{
                immediate: true,
                deep:true
            })
                return{
                    message,
                    info
                }
        }
    }
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>